<template>
  <div class="juese3">
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">
      <div class="zhuli" ref="title1"  id="section1">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in zuliList" :key="i" :class="'animate__animated animate__fadeInUp animate__delay-0' + i * 1 + 's'  ">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>



      <div class="zhuli" ref="title1"  id="section2">
        <div class="startTitle  animate__animated animate__fadeInUp">
          数据驾驶舱
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in jscList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>

      <div class="zhuli" ref="title1"  id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          常用功能
        </div>
        
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in cygnList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1"  id="section4">
        <div class="startTitle  animate__animated animate__fadeInUp">
          产业智库模块
        </div>
        <el-row :gutter="20">
          <el-col :span="8" :class="'animate__animated animate__fadeInUp'">
            <div class="item">
              <div class="content">
                实时国际国内商业资讯，及同业情报推送。做好旅游港及商户的产业智库
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1"  id="section5">
        <div class="startTitle  animate__animated animate__fadeInUp">
          招商资源池
        </div>
        <el-row :gutter="20">
          <el-col :span="8" :class="'animate__animated animate__fadeInUp'">
            <div class="item">
              <div class="content">
                基于智能数据驾驶舱的商区产业链图谱的分析解构，了解存量商户企业当前的商业分布和集聚情况，找到主导商业配比的核心薄弱环节，进行目标导向的精准招商，通过AIGC获取优质商户企业信息，并联动旅游港招商主体强化重点和重大项目的进度跟踪。模块包括但不限于：主导商区商业链透视，建链、强链、补链；通过AIGC全网扫描优质商户企业，进行智能推荐；结合业务系统和第三方数据源，进行20+风险因子洞察招商项目潜在风险；全域统筹招商，数据共享，高效推进重大项目
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          name: "智能助理",
          active:true,
        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,
        },
        {
          id: '4',
          name: "常用功能",
          active: false,
        },{
          id: '5',
          name: "智库模块",
          active: false,
        }
        // ,{
        //   id: '6',
        //   name: "招商资源池",
        //   active: false,
        // },
      ],
      zuliList: [
        {
          name: '招商智能助理',
          content: '基于多方数据资源，通过AIGC实现旅游港覆盖商家从宏观到微观的全景洞察。基于区域商业配比、经营数据的广泛采集的分析，帮助旅游港观察发展现状、掌握运行态势、洞察商区产业空间实时状态、统筹商户生态资源、呈现主导商业链图谱、明确主导商业分布、助力精准招商、发现商业链薄弱环节从而针对性补足，促进商业升级和创新，实现旅游港园区商户企业的精准管理和赋能',
        }
      ],
      jscList: [
        {
          name: '旅游港商业布局全景',
          content: '商业布局全景旨在直观呈现地域、商户全貌，覆盖全景概览、商业布局、商户辐射、分布等内容。并通过客流动向、到店客流量，商户总览、空间资源、商业发展趋势维度分析，使运营者迅速直观地抓取区域全貌。在地图上以柱体高低的形式显示每个区域在每个时间段新增的商户数量；再通过商业配比变迁、商户发展、业态分布、新增商户维度全面了解旅游港演进和商户辐射的概况。模块包括但不限于：商区商业布局地图，商区生态，实时房态，商户画像',
        },
        
      ],
      cygnList: [
        {
          name: '招商雷达',
          content: '结合产业链分析与AIGC技术，围绕商区主导商业链短板，全网扫描主导商业内行业龙头商户企业在全国的分布情况，向旅游港商区推荐符合主导商业定位的优质商户企业，助力精准招商和商业转型升级',
        },
        {
          name: '入驻助手',
          content: '基于“招商漏斗”实现从招商线索发掘、商机集中报备、商机优先级排序到洽谈跟踪、进而签约落地全过程一体化管理，实时跟踪重大项目的形象进度和履约情况，协同各方加速项目竣工入驻',
        },
        {
          name: '全员招商/招商活动/商机共享',
          content: '下好招商“一盘棋”，在旅游港层面联动各开发运营主体，已有商户，构建统筹管控的商机库，实现项目跨园区分配，减少客户流失，均衡商业商户企业分布，盘活空闲空间资源，加速去化',
        },
        {
          name: '目标商户财务可行性评估/优质商户判断',
          content: '结合业务系统和第三方数据源，全面掌握企业经营变更、纳税异动、经营风险、司法风险、股权风险、财产风险等变动情况，并进行预警提示。同时，对于 在洽企业，可以通过钻取六级股权关系，深度洞察企业在经营、司法、股权、财产等方面可能存在的潜在风险，从而科学研判项目发展前景、推动优质项目落地',
        },{
          name: '竞业情报',
          content: '结合商区现有的商业发展基础、条件以及全国商区产业发展的大趋势，结合产业链图谱与AIGC，通过基因筛查进行精准招商，向商区推荐符合主导商业配比定位的全国头部商户企业，提供全生态链的招商服务，辅助招商决策，帮助补缺、完善产业链，促进产业链形成闭环，并进行商机评估，风险控制，有效地推动旅游港商区产业的转型升级',
        },{
          name: '装修辅助',
          content: '为将入驻商户提供装修供应链推荐服务',
        },{
          name: '产业金融',
          content: '为将入驻商户提供融资及小贷业务推荐服务',
        },{
          name: '商户管理',
          content: '建立商户企业库，通过工商信息、经营状况、风险信息等维度，构建商户企业360°图谱，全面了解本区域商户企业的现状及动态',
        },
      ],
    }
  },
  mounted() {
    ;
  },
  methods: {
    name() {

    },
    maodian(num) {
      this.list.map((item, i) => {
        if (i <= (num - 1)) {
          item.active = true
        } else {
          item.active = false
        }
      })
      var tar = document.getElementById('section'+num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.juese3 {
  height: 100%;

  .jindu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    border: 0px solid #DDDDDD;

    .steps {
      justify-content: center;
    }

    .juli {
      margin-right: 253px;
    }

    .juli2 {
      margin-right: 211px;
    }
  }

  .jueseContent {
    // width: 100%;
    // padding-top: 20px;
    // overflow-y: auto;
    // // border: 1px solid red;
    // height: calc(100% - 88px);

    .startTitle {
      font-size: 20px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }

    .item {
      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
      border-radius: 12px;
      background: #FFFFFF;
      box-sizing: border-box;
      height: 100%;
    }

    .zhuli {
      width: 100%;
      overflow: hidden;

      .item {
        padding: 32px;
        margin-bottom: 24px;
        background: url('~@/assets/images/mkBj.png') repeat;
        background-size: cover;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        transition: all 0.3s;
        &:hover{
          transform: translateY(-10px);
        }
        .title {
          font-size: 24px;
          font-weight: 600;
          color: #000000;
          height: 60px;
        }

        .content {
          margin: 21px 0 30px;
          font-size: 18px;
          height: 115px;
          font-weight: 400;
          color: #000000;
          display: -webkit-box;
          display: -moz-box;
          // white-space: pre-wrap;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
          -webkit-line-clamp: 5;
          /*显示行数  要几行就改几行*/
        }

        .anniu {
          text-align: center;
          line-height: 56px;
          height: 56px;
          cursor: pointer;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #0661FB;
          background: #FFFFFF;
          border: 1px solid rgba(202, 202, 202, 0.67);
          transition: all 0.4s;
          &:hover {
            color: #FFFFFF;
            background: #0661FB;
            border: 1px solid #0661FB;
            box-shadow: 0px 0px 20px 0px rgba(6, 97, 251, 0.3);
          }
        }
      }
    }


  }


}
/deep/ .el-row--flex{
  flex-wrap: wrap;
}
</style>